import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: HomePage()));
var newZealandImage = 'https://i1.bvimg.com/688304/3a1c7b7e40cb2261.jpg';
var parisImage = 'https://i1.bvimg.com/688304/b39d57d4ba6ca033.jpg';
var auroraImage = 'https://i1.bvimg.com/688304/c81d8fd813a43789.jpg';
var berlinImage = 'https://i1.bvimg.com/688304/35fd22de2ccb2ed4.jpg';
var amsterdamImage = 'https://i1.bvimg.com/688304/e700052513251738.jpg';
var gradient1 = [Color(0xFFdc5f89), Color(0xFFeea694)];
var gradient2 = [Color(0xFF269b70), Color(0xFF7ce6a9)];
var gradient3 = [Color(0xFF526fe2), Color(0xFF8351e5)];
var images = [
  newZealandImage,
  parisImage,
  auroraImage,
  berlinImage,
  amsterdamImage
];

class HomePage extends StatefulWidget {
  @override
  createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  build(context) => Scaffold(
      backgroundColor: Color(0xff1e1359),
      bottomNavigationBar: Theme(
        data: ThemeData(canvasColor: Color(0xFF382f6e)),
        child: BottomNavigationBar(
          fixedColor: Colors.pink,
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(title: Container(), icon: Icon(Icons.home)),
            BottomNavigationBarItem(
                title: Container(),
                icon: Icon(Icons.place, color: Colors.grey.withOpacity(0.6))),
            BottomNavigationBarItem(
                title: Container(),
                icon: Icon(Icons.person, color: Colors.grey.withOpacity(0.6))),
          ],
        ),
      ),
      body: ListView(
        physics: BouncingScrollPhysics(),
        children: [
          SizedBox(height: 16.0),
          TopSection(),
          SizedBox(height: 12.0),
          MainCarousel(),
          SecondHeader(),
          SizedBox(height: 16.0),
          SecondCarousel()
        ],
      ));
}

class SecondCarousel extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: const EdgeInsets.only(left: 16.0),
        child: Container(
          height: 120.0,
          child: ListView(
            physics: BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            children: [
              TourCard('浪漫巴黎', parisImage),
              TourCard('柏林之旅', berlinImage),
              TourCard('阿姆斯特丹环游', amsterdamImage),
            ],
          ),
        ),
      );
}

class SecondHeader extends StatelessWidget {
  const SecondHeader({
    Key key,
  }) : super(key: key);

  @override
  build(context) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Text('热门景点',
            style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 22.0)),
      );
}

class TourCard extends StatelessWidget {
  final name;
  final image;
  TourCard(this.name, this.image);
  @override
  build(context) => Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: Container(
          height: 120.0,
          width: 200.0,
          decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(image),
                fit: BoxFit.cover,
                colorFilter:
                    ColorFilter.mode(Colors.black54, BlendMode.darken)),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                name,
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0),
              ),
              SizedBox(
                height: 4.0,
              ),
              Text(
                'USD 1200 | 5 Days',
                style: TextStyle(
                  color: Colors.white70,
                ),
              ),
            ],
          ),
        ),
      );
}

class MainCarousel extends StatelessWidget {
  const MainCarousel({
    Key key,
  }) : super(key: key);

  @override
  build(context) => CarouselSlider(
      viewportFraction: 0.95,
      aspectRatio: 2.0,
      items: images.map((i) {
        return Builder(
          builder: (context) {
            return Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 5.0),
                child: Column(
                  children: [
                    Container(
                      height: 160.0,
                      width: double.infinity,
                      child: Image.network(i, fit: BoxFit.cover),
                    ),
                    SizedBox(
                      height: 8.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '新西兰',
                          style: TextStyle(
                              color: Colors.white, fontWeight: FontWeight.bold),
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.star,
                              color: Colors.yellow,
                              size: 14.0,
                            ),
                            Icon(
                              Icons.star,
                              color: Colors.yellow,
                              size: 14.0,
                            ),
                            Icon(
                              Icons.star,
                              color: Colors.yellow,
                              size: 14.0,
                            ),
                            Icon(
                              Icons.star,
                              color: Colors.yellow,
                              size: 14.0,
                            ),
                            Icon(
                              Icons.star_border,
                              color: Colors.yellow,
                              size: 14.0,
                            ),
                          ],
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 4.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          'USD 5.250',
                          style: TextStyle(color: Colors.white),
                        ),
                        Row(
                          children: [
                            Text(
                              '4.5',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            SizedBox(
                              width: 8.0,
                            ),
                            Text(
                              '(620 Review)',
                              style: TextStyle(color: Colors.white54),
                            )
                          ],
                        ),
                      ],
                    ),
                  ],
                ));
          },
        );
      }).toList(),
      height: 238.0,
      autoPlay: false);
}

class TopSection extends StatelessWidget {
  const TopSection({
    Key key,
  }) : super(key: key);

  @override
  build(context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '旅行',
            style: TextStyle(
                color: Colors.white,
                fontSize: 22.0,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 16.0,
          ),
          Container(
            color: Color(0xFF382f6e),
            child: Row(
              children: [
                SizedBox(
                  width: 8.0,
                ),
                Icon(
                  Icons.search,
                  color: Colors.grey,
                ),
                SizedBox(
                  width: 8.0,
                ),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                        hintText: '搜索目的地',
                        hintStyle: TextStyle(
                          color: Colors.white70,
                        ),
                        border: InputBorder.none),
                  ),
                )
              ],
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
          Container(
            height: 32.0,
            child: ListView(
              physics: BouncingScrollPhysics(),
              scrollDirection: Axis.horizontal,
              children: [
                GradientButton('意大利', gradient1),
                GradientButton('罗马', gradient2),
                GradientButton('法国', gradient3),
                GradientButton('伦敦', gradient1),
              ],
            ),
          ),
          SizedBox(
            height: 16.0,
          ),
          Text(
            '目的地',
            style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                fontWeight: FontWeight.w600),
          ),
        ],
      ),
    );
  }
}

class GradientButton extends StatelessWidget {
  final name;
  final colors;
  GradientButton(this.name, this.colors);
  @override
  build(context) {
    return Padding(
      padding: const EdgeInsets.only(right: 10.0),
      child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4.0),
            gradient: LinearGradient(
                colors: colors,
                begin: Alignment.topLeft,
                end: Alignment.bottomLeft)),
        child: Center(
            child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 38.0),
          child: Text(
            name,
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
        )),
      ),
    );
  }
}
